<template>
  <component :is="name" :formItem="formItem"></component>
</template>
<script lang="ts" setup>
import Approve from './Approve.vue'
import SendTag from './SendTag.vue'
import DefaultTag from "./DefaultTag.vue";
import {ref, watch} from "vue";

const props = defineProps<{
  formItem: any
}>()
const name = ref(DefaultTag)


const updateWorkflow = () => {
  if(props.formItem?.type == "Workflow"){
    name.value = DefaultTag
  }
  if(props.formItem?.type == "AuditActivity"){
    name.value = Approve
  }
  if(props.formItem?.type == "SignalReceived"){
    name.value = SendTag
  }
  if(props.formItem?.type == "Finish"){
    name.value = DefaultTag
  }
}
updateWorkflow()

watch(
    () => props.formItem,
    () => {
      updateWorkflow()
    },
    {
      deep: true
    }
)
</script>